import React from 'react'
import TestUseState from './useState' // 测试 useState
import TestUseContext from './useContext' // 测试 useContext
import TestUseReducer from './useReducer' // 测试 useReducer
import TestUseEffect from './useEffect' // 测试 useEffect

const TestHooks: React.FC = () => {
	return (
		<div className="container">
			<h3>React Hooks</h3>
			<p>
				首先要给大家说一下React的组件创建方式，一种是<b>类组件</b>
				，一种是<b>纯函数组件</b>
				，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。
			</p>

			<h3>纯函数</h3>
			<ul>
				<li>纯函数组件没有状态</li>
				<li> 纯函数组件没有生命周期</li>
				<li> 纯函数组件没有this</li>
				<li>只能是纯函数</li>
			</ul>

			<h3>React Hooks</h3>
			<p>
				为了解决这种，类组件功能齐全却很重，纯函数很轻便却有上文几点重大限制，React团队设计了React
				Hooks
			</p>
			<p>
				React Hooks就是加强版的函数组件，我们可以完全不使用
				class，就能写出一个全功能的组件
			</p>

			<h3>什么是Hooks?</h3>
			<p>
				'Hooks'的单词意思为“钩子”。 React Hooks
				的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。而React
				Hooks 就是我们所说的“钩子”。
			</p>
			<ul>
				<li>
					useState()
					<TestUseState></TestUseState>
					<p>
						我们实现了一个功能完全一样的计数器，代码看起来更加的轻便简洁，没有了继承，没有了渲染逻辑，没有了生命周期等。这就是hooks存在的意义。
					</p>
				</li>
				<li>
					userContext()
					<TestUseContext></TestUseContext>
					<p>
						<b>共享状态钩子</b>
						该钩子的作用是，在组件之间共享状态。避免了react逐层通过Props传递数据。
					</p>
				</li>
				<li>
					userReducer()
					<TestUseReducer></TestUseReducer>
					<p>
						{
							'这是 useState 的替代方案，接收类型为 (state, action) => newState 的 reducer，并返回与 dispatch 方法配对的当前 state。'
						}
					</p>
				</li>
				<li>
					useEffect()
					<TestUseEffect></TestUseEffect>
					<p>
						熟悉redux-saga的同学一定对Effect不陌生,它可以用来更好的处理副作用，如异步请求等，我们的useEffect()也是为函数组件提供了处理副作用的钩子。具体用法
						{' useEffect(() => {}, [array]) '}
					</p>
					<p>
						函数组件中没有生命周期，那么可以使用 useEffect
						来替代。如果你熟悉 React class 的生命周期函数，你可以把
						useEffect Hook 看做
						componentDidMount，componentDidUpdate 和
						componentWillUnmount 这三个函数的组合。
					</p>
				</li>
				<li>
					useMemo()
					<p></p>
				</li>
				<li>
					useRef()
					<p></p>
				</li>
				<li>
					自定义Hook
					<p></p>
				</li>
			</ul>
			<p>
				不同的钩子为函数引入不同的外部功能，我们发现上面四种钩子都带有use前缀，React约定，钩子一律使用
				use前缀命名。所以，你自己定义的钩子都要命名为useXXX。
			</p>
		</div>
	)
}

export default TestHooks
